import React, { Component } from 'react';
import { Modal, Form, Input,Radio,Select,DatePicker,Popconfirm ,Row,Col,Button,Icon,Upload, message,Table} from 'antd';
import styles from '../item.less';
import moment from 'moment';
const config = require('../../config');
class _Main extends Component {

  constructor(props) {
    super(props);
    this.state = {orderBy:'createAt',filter:{},visible:false,visible1:false,components:props.record.components
 || []};
  }
  showModelHandler =async (e) => {
    if (e) e.stopPropagation();
      this.setState({
        visible1: true,
      });
  }
  handleSubmit =async (e) => {
    if (e) e.stopPropagation();
      this.setState({
        visible1: false,
      });
  }
  hideModelHandler =async (e) => {
    if (e) e.stopPropagation();
      this.setState({
        visible1: false,
      });
  }
  render() {
    const {children}=this.props;
    const columns = [
    {
      title: '产品详情',
      dataIndex: 'cnum',
      key: 'cnum',
      render: (text,record) => 
              <table>
                <tr>
                    <th>现货编号</th><th>库房</th><th>产品pi</th><th>产品编号</th><th>现货图片</th><th>采购编号</th><th>合同编号</th><th>客户编号</th><th>下单时间</th><th>入库时间</th><th>状态</th><th>组件列表</th>
                </tr>
                <tr>
                    <td>{record.stock.cnum}</td><td>{record.stock.warehouse_num}</td><td>{record.stock.product_identity}</td><td>{record.stock.product_num}</td><td><img style={{width:"50px",heigth:"50px"}} src={config.host+'/file/'+record.stock.pic}/></td><td>{record.stock.purchase_num}</td><td>{record.stock.contract_num}</td><td>{record.stock.customer_cnum}</td><td>{record.stock.order_at}</td><td>{record.stock.arrive_at}</td><td>{record.stock.status}</td><td><table>
                            <tr>
                                <th>组件名字</th>
                                <th>提箱单号</th>
                                <th>箱号</th>
                                <th>箱单号</th>
                                <th>箱数</th>
                                <th>组件编号</th>
                                <th>入库时间</th>
                                <th>下单时间</th>
                                <th>状态</th>
                            </tr>
                            {Array.from(record.stock.components||[]).map(
                        cm=><tr>
                                <td style={{color:""}}>{cm.name || ''}</td>
                                <td>{cm.suitcase_num || ''}</td>
                                <td>{cm.box_num || ''}</td>
                                <td>{cm.box_order_num || ''}</td>
                                <td>{cm.box_quantity || ''}</td>
                                <td>{cm.cnum || ''}</td>
                                <td>{cm.input_at || ''}</td>
                                <td>{cm.order_at || ''}</td>
                                <td>{cm.status || ''}</td>
                            </tr>)}
                        </table>
                      </td>
                </tr>
              </table>


    }];
    return (
      <span style={{fontSize:"14px",marginRight:15}}>
            <span onClick={this.showModelHandler}>
              { children }
            </span>
          <Modal
          title={'产品详情'}
          visible={this.state.visible1}
          onCancel={this.hideModelHandler}
          onOk={this.handleSubmit}
          width="90%"
        >
           <Table dataSource={this.state.components} columns={columns} pagination={false} rowKey="" />
         </Modal>
      </span>
    );
  }
}
export default _Main;
